<template>
  <h1>vue3</h1>
  <ul>
    <li v-for="(value, key) in person" :key="key">{{ key }} -- {{ value }}</li>
  </ul>
  <button @click="handleClick">添加</button>
</template>

<script lang="ts">
export default {
  name: "App",
  // data只能写函数形式
  data() {
    return {
      /*
        响应式: 更新数据时，数据变，用户界面也变化
        vue2: 
          新增数据不是响应式   解决：this.$set(this.person, 'age', 18)
          原理：Object.defineProperty
        vue3:
          所有数据都是响应式（新增的也是响应式），删除$set方法
          原理：Proxy
        
        插值语法（双大括号表达式）：
          语法：{{ JS表达式 }}
          作用：用来动态渲染数据
      */
      count: 0,
      person: {
        name: "静哥",
      },
    };
  },
  methods: {
    handleClick() {
      // 类型报错不影响程序的运行
      this.person.age = 40;
    },
  },
};
</script>

<style></style>
